<template>
<!-- 综合查询模块-综合查询页面 -->
    <div class="fillcontain">
        <!-- 查询条件 -->
        <div class="fastQuery">
            <el-row>
                <el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
                <el-col :span="10">
                    <el-badge :value="warnCount" class="item fastQuery_item">
                        <el-button size="small" class="isActive">预警
                        </el-button>
                    </el-badge>
                    <el-badge :value="paginations.total" class="item fastQuery_item" type="warning">
                        <el-button size="small">全部
                        </el-button>
                    </el-badge>
                </el-col>
                <el-col :span="4" class="moreCondition">
                    <span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
                    <span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
                </el-col>
                <el-col :span="8"></el-col>
            </el-row>
        </div>
        <!-- 查询表单 -->
        <el-form v-show="isShow" :model="searchParams" :rules="rules" ref="ruleForm" label-width="120px"
                 class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="保单号" prop="chdrnum">
                        <el-input v-model="searchParams.chdrnum" placeholder="保单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="受理号" prop="caseno">
                        <el-input v-model="searchParams.caseno" placeholder="受理号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="渠道" prop="appFrom">
                        <el-select v-model="searchParams.appFrom" placeholder="渠道">
                            <el-option v-for="item in appFroms" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="任务级别" prop="routeid">
                        <el-select v-model="searchParams.routeid" placeholder="任务类型">
                            <el-option v-for="item in routeids" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="电子投保标识" prop="appFrom">
                        <el-select v-model="searchParams.appFrom" placeholder="电子投保标识">
                            <el-option v-for="item in appFroms" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="机构" prop="insuredname">
                        <el-input v-model="searchParams.insuredname" placeholder="机构"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="受理日" prop="birthday">
                            <el-date-picker
                            v-model="searchParams.birthday"
                            type="date"
                            value-format="yyyyMMdd"
                            :picker-options="pickerOptions1"
                            placeholder="请选择">
                            </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_right">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>

        </el-form>

        <div class="contain">
            <!-- 操作按钮 -->
            <el-row class="bgfff pb15"> 
                <el-col :span="24" class="pt5">
                    <el-button type="danger" plain>核保处理</el-button>
                    <el-button type="danger" plain>End单</el-button>
                    <el-button type="danger" plain>核保提核保单录入</el-button>
                </el-col>
            </el-row>
          <div class="table_container">
            <el-table
                 v-loading="loading"
                 :data="tableData"
                  @row-dblclick="customerPro"
                 highlight-current-row
                 header-cell-class-name="table-header-class"
                 style="width:100%">
                 <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                    property="customerNo"
                    label="标志"
                    align='center'>
                </el-table-column>
                 <el-table-column
                 min-width="120"
                show-overflow-tooltip
                   property="mark"
                   label="检出人"
                   align='center'>
                </el-table-column>
                 <el-table-column
                 min-width="120"
                show-overflow-tooltip
                   property="coreSource"
                   label="机构"
                   align='center'
                   >
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="customerName"
                   label="渠道"
                   align='center'>
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="idNo"
                   label="保单号"
                   align='center'>
                </el-table-column>
                 <el-table-column
                 min-width="120"
                show-overflow-tooltip
                   property="sex"
                   label="被保险人"
                   align='center'>
                </el-table-column> 
                  <el-table-column
                  min-width="120"
                show-overflow-tooltip
                   property="birthday"
                   label="主合同名称"
                   align='center'>
                </el-table-column> 
                 <el-table-column
                 min-width="120"
                show-overflow-tooltip
                   property="relationPolicyNo"
                   label="案件类型"
                   align='center'
                   sortable>
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="relationMain"
                   label="案件状态"
                   align='center'
                   sortable>
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="mobileTelephone"
                   label="保单周年日"
                   align='center'>
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="address"
                   label="Rerate Date"
                   align='center'>
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="address"
                   label="抽档日期"
                   align='center'>
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="address"
                   label="历史处理人"
                   align='center'>
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="address"
                   label="处理日期"
                   align='center'>
                </el-table-column>
                <el-table-column
                min-width="120"
                show-overflow-tooltip
                   property="address"
                   label="影像信息"
                   align='center'>
                </el-table-column>
                <el-table-column 
                width="80"
                    fixed="right"
                   label="操作"
                   align='center'>
                    <template slot-scope="scope">
                        <span class="operationIcon" @click="customerPro(scope.row)">
                            <el-tooltip class="item" effect="light" content="查看" placement="top">
                                <i class="el-icon-view"></i>
                             </el-tooltip>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
           <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            background
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.pageSizes"
                            :page-size="paginations.pageSize"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.pageIndex'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
          </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    export default {
        data(){
            var validatePhone = (rule, value, callback) => {
                if (value) {
                    console.log(value)
                    if(!this.checkPhone(value)){
                        callback(new Error('输入的手机号码有误！'));
                    } else {
                        callback();
                    }
                }
            };
            return {
                isShow:false,
                // 查询条件
                rules:{
                    customerNo:[],
                    customerName:[],
                    telephone: [
                        { validator: validatePhone, trigger: 'blur' },
                    ],
                    birthday:[],
                    idNo:[],
                    sex:[]
                },
                searchParams:{
                    customerNo:'', //客户号
                    customerName:'', //客户姓名
                    telephone:'', //手机号码 
                    birthday:'', // 生日
                    idNo: '', // 证件号码
                    sex: '', //性别
                },
                sexList: constant.sex,
                tableData: [],
                loading:false,
              //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                  disabledDate(time) {
                    return time.getTime() > Date.now();
                  }
                }
            }
        },
        created(){
//          this.getList();
        },
        mounted(){
            // this.getList();
        },
        methods: {
            
            // 综合查询列表
            getList(){
                this.paginations.total=0;
                this.tableData=[];
                let para = {
                    "customerNo": this.searchParams.customerNo,
                    "customerName": this.searchParams.customerName,
                    "telephone": this.searchParams.telephone,
                    "idNo": this.searchParams.idNo,
                    "sex": this.searchParams.sex,
                    "birthday": this.searchParams.birthday,
                    "pageSize": this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                    "orderBy":"",
                }

                this.$store.dispatch('loading/CHANGE_LOADING',true)
                getComCheckList(para).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS && res.data && res.data.list.length){
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                    }
                   
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
               this.paginations.pageSize = pageSize;
               this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
               this.paginations.pageIndex = page;
               this.getList();
            },
            // 校验手机号
            checkPhone(phone){
                if(!(/^1[3456789]\d{9}$/.test(phone))){ 
                    return false; 
                } 
                return true
            },
            // 根据条件查询列表
            subGetList(){
                this.paginations.pageIndex=1;
                this.getList();
            },
            
             showorhide() {
                this.isShow = !this.isShow;
            },

            // 清除查询条件
            resetSearch(){
                this.searchParams.customerNo = '';
                this.searchParams.customerName = '';
                this.searchParams.telephone = '';
                this.searchParams.idNo = '';
                this.searchParams.sex = '';
                this.searchParams.birthday = '';
            }
        },
        computed:{
            ...mapGetters(['tags']),
        },

    }
</script>
<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;

        .fastQuery {
            padding: 15px 20px 10px 20px;
            background: #fff;
            border-bottom: 1px solid #e1e1e1;

            .fastQuery_title {
                color: #666;
                padding: 6px 0px;
            }

            .fastQuery_item {
                margin: 0 10px;
            }

            .item_default {
                .el-button {
                    color: #409EFF !important;
                    border-color: #c6e2ff !important;
                    background-color: #ecf5ff !important;
                }

            }

            .moreCondition {
                color: #68a3fc;
                cursor: pointer;
                padding: 6px 0px;

                .el-icon-d-arrow-right {
                    transform: rotate(90deg);
                }

                .el-icon-d-arrow-left {
                    transform: rotate(-90deg);
                }
            }
        }
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;

        .svg-icon {
            font-size: 14px;
            fill: #68a3fc;
        }
    }

    .search_container {
        padding: 20px 20px 0 20px;
    }

    .el-dropdown {
        vertical-align: top;
    }

    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>



